<template>
  <Modal title="批量设置"
         width='580'
         :value="modalVisible"
         :transfer='false'
         :closable='false'
         :mask-closable='false'
         id='modal'>
    <Row type='flex'
         justify="space-between"
         align='middle'
         class="modal-content">
      <Col class='section'>
      <Row class='section-title'>
        <Row type='flex'
             justify="space-between"
             align='middle'
             class="section-count">
          <Col>
          <!-- <Radio @on-change="leftCheckAll"
                    v-model="leftCheckAllStatus">全部游戏劵</Radio> -->
          全部游戏劵
          <!-- <span v-else>可选门店</span> -->
          <!-- <span v-else>全部门店</span> -->
          </Col>
          <Col>{{leftSearchResult.length}}</Col>
        </Row>
      </Row>
      <Row class="section-content">
        <Col><Input search
               placeholder="请输入搜索内容"
               v-model="OrgParmas.orgName"
               @on-keyup="filterSpace"
               :maxlength="100"
               @on-search="searchLeftShoplist"
               style="width:100%" /></Col>
        <Col class="content-show">
        <div>
          <ul class="selected-shop"
              v-if="leftSearchResult.length > 0">
            <li v-for="(item, index) in leftSearchResult"
                :key='index'>
              <Radio v-model="item.checked"
                     @on-change="leftSelect(...arguments, index)"><span style="margin-left:5px">{{ item.skuName }}</span></Radio>
            </li>
          </ul>
          <div v-else>暂无数据</div>
        </div>
        </Col>
      </Row>
      </Col>
      <Col>
      <div>
        <div @click='cancelSelect'><Button icon="ios-arrow-back"></Button></div>
        <div style="margin-top:20px"
             @click='sureCheck'><Button icon="ios-arrow-forward"
                  type="primary"></Button></div>
      </div>
      </Col>
      <Col class="section">
      <Row class="section-title">
        <Row type='flex'
             justify="space-between"
             align='middle'
             class="section-count">
          <Col>
          <Checkbox v-model="rightCheckAllStatus"
                    @on-change="rightCheckAll">已选游戏券</Checkbox>
          </Col>
          <Col>{{rightSelect.length}}</Col>
        </Row>
      </Row>
      <Row class="section-content">
        <Col><Input search
               v-model="rightSearchValue"
               placeholder="请输入搜索内容"
               @on-keyup="filterSpace"
               :maxlength="100"
               @on-search="rightSearchChange"
               style="width:100%" /></Col>
        <Col class="content-show">
        <ul class="selected-shop">
          <li v-for="(item, index) in rightSearchResult"
              :key='index'>
            <Radio v-model="item.checked"
                   @on-change="rightSelectClick(...arguments, index)"><span style="margin-left:5px">{{ item.skuName }}</span></Radio>
          </li>
        </ul>
        </Col>
      </Row>
      </Col>
    </Row>
    <div slot="footer">
      <Button @click="cancel"
              style="margin-right:10px;width:80px">取消</Button>
      <Button type="primary"
              style='width:80px'
              @click="volumeSet">{{sureTitle}}</Button>
    </div>
  </Modal>
</template>
<script>
// import { getOrgList } from '@/api/system/org'
import { goodsList } from '@/api/goods/index'
export default {
  name: 'SelectShop',
  data () {
    return {
      OrgParmas: {
        merchantId: this.$store.state.user.merchantId,
        orgName: '',
        status: 1,
        pageIndex: 1,
        pageSize: 9999
      },
      // dataTree: [
      //   { name: '游戏劵一', id: 'a', checked: false },
      //   { name: '游戏劵二', id: 'b', checked: false },
      //   { name: '游戏劵三', id: 'c', checked: false },
      //   { name: '游戏劵四', id: 'd', checked: false },
      //   { name: '游戏劵五', id: 'e', checked: false }
      // ],
      dataTreeFormat: [],
      leftSearching: true,
      leftCheckAllStatus: false,
      leftSearchResult: [],
      rightCheckAllStatus: false,
      rightSearchValue: '',
      rightSearchResult: [],
      rightSelect: [],
      modalVisible: this.modalShow,
      defaultCheck: [],
      treeDefaultProps: {
        children: 'childList',
        label: 'orgName'
      }
    }
  },
  props: {
    checkdList: {
      type: Array,
      default: () => []
    },
    modalShow: {
      type: Boolean
    },
    tpyeIndex: {

    },
    sureTitle: {
      type: String,
      default: '确定'
    }
  },
  watch: {
    rightSearchValue (val) {
      if (!val) {
        this.rightSearchResult = this.rightSelect.map(item => {
          return {
            ...item
          }
        })
        this.judgeRightCheckedStatus()
      }
    },
    checkdList () {
      this.getDetail()
    }
  },
  computed: {
    rightSelectIds () {
      return this.rightSelect.map(item => item.skuName)
    },
    rightCheckIds () {
      return this.rightSearchResult.filter(item => item.checked).map(item => item.skuName)
    }
  },
  mounted () {
    // this.lowerDimension(this.dataTree)
    this.searchLeftShoplist()
    this.getDetail()
  },
  methods: {
    filterSpace () {
      this.rightSearchValue = this.rightSearchValue.replace(/\s/g, '')
      this.OrgParmas.orgName = this.OrgParmas.orgName.replace(/\s/g, '')
    },
    getDetail () {
      this.rightSelect = this.checkdList.map(item => {
        return {
          ...item,
          checked: false
        }
      })
      this.rightSearchChange()
    },
    searchLeftShoplist () {
      // if (this.OrgParmas.orgName) {
      goodsList({
        merchantId: this.$store.state.user.merchantId,
        goodsStatus: 1,
        goodsKindIdList: ['02-0201', '02-0202'],
        offset: 0,
        saleType: 0,
        skuName: this.OrgParmas.orgName,
        limit: 9999
      }).then(res => {
        if (res.data.status === 200) {
          let goods = res.data.data.goods
          goods = res.data.data.goods
          // let arrData = []
          // this.formValidate2.selectedMeal = []
          this.leftSearchResult = goods.map(ele => {
            return { ...ele, num: 1, isshow: false, checked: false, disable: true }
            // this.formValidate2.selectedMeal.push({ ...ele })
          }).filter(ele => ele.skuName !== '游戏币')
          // this.leftSearchResult = goods
          this.leftSearchResult.forEach(item => {
            if (this.rightSelectIds.includes(item.skuName)) {
              item.checked = true
            }
          })
          this.judgeLeftCheckedStatus()
          console.log('goods', goods)
          // this.formValidate2.selectedMeal = goods
          // this.formValidate2.tableDataGameCoin = goods
          console.log('shopList', res.data.data)
        } else {
          this.$Message.error(`${res.data.error}`)
        }
      })
      // getOrgList(this.OrgParmas).then(res => {
      //   const result = res.data
      //   if (result.status === 200) {
      //     this.leftSearchResult = result.data.records.filter(item => item.orgType === 1)
      //     // this.leftSearching = true
      //     this.leftSearchResult.forEach(item => {
      //       if (this.rightSelectIds.includes(item.id)) {
      //         item.checked = true
      //       }
      //     })
      //     this.judgeLeftCheckedStatus()
      //   } else {
      //     this.$Message.error(`${result.message}`)
      //   }
      // })
      // }
    },
    leftSelect (ischecked, index) {
      this.leftSearchResult.forEach(ele => {
        ele.checked = false
      })
      this.leftSearchResult[index].checked = ischecked
      this.judgeLeftCheckedStatus()
    },
    judgeLeftCheckedStatus () {
      const len = this.leftSearchResult.length
      this.leftCheckAllStatus = !!len && len === this.leftSearchResult.filter(item => item.checked).length
    },
    leftCheckAll (ischecked) {
      this.leftSearchResult = this.leftSearchResult.map(item => {
        item.checked = ischecked
        return item
      })
    },
    rightSelectClick (ischecked, index) {
      this.rightSearchResult[index].checked = ischecked
      this.judgeRightCheckedStatus()
    },
    judgeRightCheckedStatus () {
      const len = this.rightSearchResult.length
      this.rightCheckAllStatus = !!len && len === this.rightSearchResult.filter(item => item.checked).length
    },
    rightCheckAll (ischecked) {
      this.rightSearchResult = this.rightSearchResult.map(item => {
        item.checked = ischecked
        return item
      })
    },
    rightSearchChange () {
      this.rightSearchResult = this.rightSelect.filter(item => item.skuName.includes(this.rightSearchValue))
      this.judgeRightCheckedStatus()
    },
    // 取消选择
    cancelSelect () {
      this.leftSearchResult.forEach(item => {
        if (this.rightCheckIds.includes(item.skuName)) {
          item.checked = false
        }
      })
      this.rightSelect = this.rightSelect.filter(item => !this.rightCheckIds.includes(item.skuName))
      this.rightSearchResult = this.rightSearchResult.filter(item => !this.rightCheckIds.includes(item.skuName))
      this.judgeLeftCheckedStatus()
      this.judgeRightCheckedStatus()
    },
    // 确认选择
    sureCheck () {
      let deleteIds = []
      let addIndex = []
      let treeSelects = []
      treeSelects = this.leftSearchResult
      const rightAllIds = this.rightSelect.map(item => item.skuName)
      this.leftSearchResult.forEach((item, index) => {
        if (rightAllIds.includes(item.skuName)) {
          if (!item.checked) {
            deleteIds.push(item.skuName)
          }
        } else if (item.checked) {
          addIndex.push(index)
        }
      })
      for (let i = this.rightSelect.length - 1; i >= 0; i--) {
        const skuName = this.rightSelect[i].skuName
        if (deleteIds.includes(skuName)) {
          this.rightSelect.splice(i, 1)
        }
      }
      addIndex.forEach(item => {
        this.rightSelect.push(treeSelects[item])
      })
      this.rightSelect = this.rightSelect.map(item => {
        const obj = { ...item }
        obj.checked = false
        return obj
      })
      this.rightSearchChange()
    },
    volumeSet () {
      if (this.rightSelect.length > 0) {
        this.$emit('selctshop', this.rightSelect)
      } else {
        this.$Message.error('请至少选择一个游戏券')
      }
    },
    cancel () {
      this.$emit('oncancel')
    }
  }
}
</script>
<style lang="less">
#modal {
  .modal-content {
    padding: 0 10px;
    .section {
      border: 1px solid #e8eaec;
      width: 230px;
      height: 286px;
      border-radius: 6px;
      overflow: hidden;
      .section-title {
        background: #f9fafc;
        .section-count {
          height: 36px;
          border-bottom: 1px solid #e8eaec;
          padding: 0 24px;
        }
      }
      .section-content {
        padding: 8px 12px;
        height: 248px;
        .content-show {
          width: 100%;
          margin-top: 10px;
          padding-bottom: 10px;
          height: 200px;
          overflow: auto;
          .selected-shop {
            li {
              list-style: none;
              margin-top: 11px;
              white-space: nowrap;
            }
          }
        }
      }
    }
  }
  .ivu-btn-text {
    border: 1px solid #e8eaec;
  }
  .el-tree-node > .el-tree-node__children {
    overflow: inherit;
  }
  .el-tree-node__label {
    display: inline-block;
    height: 26px;
    line-height: 26px;
    font-size: 12px;
  }
  .el-tree-node__content {
    background: #fff;
    &:hover {
      background: #fff;
    }
  }
  .el-tree-node.is-current {
    background: #fff;
  }
}
</style>
